<template>
	<view class="login">
		<view class="loginImg">
			<image class="loginImg-item" src="https://wlsy.nanjingyunpeng.cn/weixin/image/logo.png"></image>
		</view>
		<view class="loginBtn" @click="getUserInfor">
			<!-- <image class="wximg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/wxLogo.png"></image> -->
			<button class="loginbtn-item">
				<image class="wximg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/wxLogo.png"></image>
				微信登录
			</button>
		</view>
		<view class="footer">
			<image class="footerimg" src="https://wlsy.nanjingyunpeng.cn/weixin/image/footerImg.png"></image>
		</view>
	</view>
</template>

<script>
	import {
		resize,
		getopenid
	} from "../../api/api.js"
	export default {
		data() {
			return {
				logincode: "",
				openid: '',
			}
		},
		onLoad() {
			//1.登录页面加载时就调用uni.login方法，拿到登录的code，把拿到的code存起来，然后获取openid  调用获取openid方法
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					// console.log("11111111", loginRes);
					this.logincode = loginRes.code
					this.getopenid()
				}
			});
		},

		methods: {
			//2.获取openid时 把加载时调用的uni.login方法获取到的code当成参数  可以拿到openid
			async getopenid() {
				let res = await getopenid({
					code: this.logincode
				})
				// console.log("openId", res)
				this.openid = res.data.openid
			},

			//3.点击登录按钮时，获取用户信息 调用uni.getUserProfile方法可以获取到用户昵称、头像等信息，
		    // 获取到之后 调用登录接口，根据情况把需要的用户信息和openid传过去，openid必传
			//登录接口会返回token，需要把token用uni.setStorageSync存起来，然后跳转到首页
			//项目的启动页是首页，首页在加载时就判断有没有token，有的话就展示首页，没有的话就跳转到登录页
			getUserInfor(e) {
				uni.getUserProfile({
					desc: "获取你的昵称、头像、地区及性别",
					lang: 'zh_CN',
					success: async (res) => {
						// console.log("用户信息", res, res.userInfo.nickName, res.userInfo.avatarUrl)
						let res2 = await resize({
							openid: this.openid,
							nickname: res.userInfo.nickName,
							avatar: res.userInfo.avatarUrl,
						})
						if (res2.code == 1000) {
							uni.setStorageSync('token', res2.data.token)
							uni.navigateTo({
								url: "/pages/login/loginMessage"
							});
						}
					},
					fail() {}
				})
			},




		},

	}
</script>

<style scoped lang="scss">
	.login {
		min-width: 100%;
		min-height: 100%;
		background-color: #EEF7FE;

		.loginImg {
			width: 200rpx;
			height: 200rpx;
			position: fixed;
			top: 276rpx;
			left: 276rpx;

			.loginImg-item {
				width: 100%;
				height: 100%;

			}
		}

		.loginbtn-item {
			width: 650rpx;
			height: 88rpx;
			background: #06B00F;
			border-radius: 10px 10px 10px 10px;
			opacity: 1;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			position: fixed;
			bottom: 444rpx;
			left: 50rpx;

			.wximg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 8rpx;
				padding-left: 200rpx;

			}
		}

		.footer {
			width: 750rpx;
			height: 324rpx;
			position: fixed;
			bottom: 0;

			.footerimg {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
